<template>
  <div class="header">
    <ul>
      <li class="header_logo"></li>
      <li class="header_title">会飞的鱼</li>
      <li class="header_sign">
        <!-- 用户信息 -->
        <div class="user_news" v-if="userId">
          <div class="user_headImg">
            <!-- 用户头像 -->
            <img :src="userHeadImg" />
            <!-- 用户列表 -->
            <ol class="user_list">
              <li @click="toPersonal">个人中心</li>
              <li @click="logout">退出</li>
            </ol>
          </div>
          <div class="user_name">{{ userName }}</div>
        </div>
        <!-- 用户登录 -->
        <div class="user_login" v-else>
          <router-link to="/login" class="user_btn rM">登录</router-link>
          <router-link to="/register" class="user_btn">注册</router-link>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "big-header",
  data() {
    return {
      // 用户是否登录
      isUser: false,
    };
  },
  computed: {
    // 解构vuex的state
    ...mapState(["userId", "userName", "userHeadImg"]),
  },
  methods: {
    // 解构vuex的actions方法
    ...mapActions(["saveUserId", "saveUserName", "saveUserHeadImg"]),
    // 获取cookie中的userinfo字段
    getCookie() {
      let userinfo = this.$cookie.get("userinfo");
      if (userinfo) {
        // 若存在则保存到vuex中
        userinfo = JSON.parse(userinfo);
        this.saveUserId(userinfo.id);
        this.saveUserName(userinfo.userName);
        this.saveUserHeadImg(userinfo.headImg);
      }
    },
    // 个人中心
    toPersonal() {
      this.$router.push("./");
    },
    // 退出
    logout() {
      this.$cookie.set("userinfo", "", { expires: "-1" });
      this.saveUserId("");
      this.saveUserName("");
      this.saveUserHeadImg("");
      this.$message({
        message: "退出成功",
        type: "success",
        showClose: true,
        duration: 1500,
      });
    },
  },
  mounted() {
    // 初次访问获取cookie中的userinfo字段
    this.getCookie();
  },
};
</script>
<style lang="less">
.header {
  width: 100%;
  height: 80px;
  background: @cK;
  color: @cL;
  position: fixed;
  top: 0;
  z-index: 6;
  ul {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .header_logo {
      width: 60px;
      height: 60px;
      margin: 10px 0;
      background: url("../../public/img/bigtree.png") no-repeat;
      background-size: 100% 100%;
    }
    .header_title {
      height: 80px;
      line-height: 80px;
      font-size: 60px;
      font-family: "pmzd";
      color: @cI;
      text-shadow: 8px 5px 5px @cJ;
    }
    .header_sign {
      .user_news {
        display: flex;
        .user_headImg {
          width: 50px;
          height: 50px;
          padding: 15px 0;
          border-radius: 50%;
          position: relative;
          cursor: pointer;
          &:hover .user_list {
            display: block;
          }
          img {
            width: 100%;
            height: 100%;
          }
          .user_list {
            display: none;
            width: 100px;
            background: #ccc;
            border: 1px solid #000;
            border-radius: 5px;
            position: absolute;
            top: 71px;
            left: -25px;
            z-index: 8;
            li {
              height: 28px;
              line-height: 28px;
              text-align: center;
              cursor: pointer;
              &:first-child {
                border-radius: 5px 5px 0 0;
              }
              &:last-child {
                border-radius: 0 0 5px 5px;
              }
              &:not(:last-child) {
                border-bottom: 1px solid #eee;
              }
              &:hover {
                background: @cA;
              }
            }
          }
        }
        .user_name {
          margin: 15px 0 15px 15px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: flex-end;
        }
      }
      .user_login {
        .user_btn {
          display: inline-block;
          width: 66px;
          height: 28px;
          line-height: 28px;
          margin: 26px 0;
          text-align: center;
          border: 1px solid #cb99c5;
          box-shadow: 0 0 30px #e6dae8 inset;
          border-radius: 5px;
          background: #cb99c5;
          color: #fff;
        }
        .rM {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
